<template>
  <div>
    <el-form :model="dataForm" ref="dataForm" label-width="120px" size="small" :rules="rules">
      <el-form-item label="产品名称:" prop="productName">
        <el-input v-model="dataForm.productName" placeholder="请输入产品名称" maxlength="15" show-word-limit
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="所属机构:" prop="corporationId">
        <el-select :disabled="org.corporationId!==undefined" v-model="dataForm.corporationId" clearable>
          <el-option v-for="(item) in corporationList" :key="item.corporationId" :label="item.corporationName"
                     :value="item.corporationId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="可申请区域:" prop="admitArea">
        <multiCascader
          @change="onChange"
          :data="localMap"
          is-two-dimension-value
          v-model="selectedOptions">
        </multiCascader>
      </el-form-item>
      <el-form-item label="产品权益:" prop="productContent">
        <el-input v-model="dataForm.productContent" type="textarea" placeholder="请输入卡片权益等信息(400字以内)"
                  maxlength="400" show-word-limit clearable></el-input>
      </el-form-item>

      <el-form-item label="准入要求：" prop="applyQualification">
        <el-input v-model="dataForm.applyQualification" type="textarea"
                  placeholder="请输入征信、资质要求等信息(400字以内)" maxlength="400" show-word-limit
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="项目点：" prop="projectLocations">
        <ProjectArea :key="dataForm.projectLocations.length" :value="dataForm.projectLocations" :product-id="editData.productId" @change="projectLocationsChange"/>
      </el-form-item>
      <el-form-item label="产品推荐语：" prop="productSlogan">
        <el-input v-model="dataForm.productSlogan" type="textarea" placeholder="请简要概括产品亮点(15个字符以内)"
                  maxlength="15" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item label="卡片宣传图：" prop="imgUrl">
        <uploadSingleImg :value="dataForm.imgUrl" tips="图片大小限制：不超过3M" @onChange="onChangeImg"/>
      </el-form-item>
      <el-form-item label="其他备注：" prop="supplement">
        <el-input v-model="dataForm.supplement" type="textarea" placeholder="如有其他备注，请输入(200字以内)"
                  maxlength="200" clearable></el-input>
      </el-form-item>

      <el-form-item style="margin-top: 10px" label-width="130px">
        <el-button type="" @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          <fa-icon class="fa-check"/>
          保存
        </el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import {common} from '@/utils/common'
import uploadSingleImg from '@/components/uploadSingleImg'
import multiCascader from '@/components/multiCascader'
import {mapState} from 'vuex'
import api from '../api'
import {getCookie} from '@/utils/util'
import {CONSTANT_OBJ} from '@/utils/constant'
import ProjectArea from './ProjectArea.vue'
import localMap from '../js/localMap.json'

export default {
  props: {
    editData: Object,
    org: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {uploadSingleImg, multiCascader, ProjectArea},
  data () {
    return {
      localMap,
      selectedOptions: [],
      locationDialog: false,
      tenantId: getCookie('tenantId'),
      dataForm: {
        roleName: '',
        productId: '',

        productName: '',//产品名称
        corporationId: '',//机构ID
        admitArea: '',//可申请区域
        productContent: '',//产品内容
        applyQualification: '',//申请资格
        projectLocation: '',//项目点
        productSlogan: '',//产品推荐语
        imgBsnNo: '',//影像批次号
        imgUrl: '',//影像路径
        supplement: '',//补充说明
        projectLocations: [],//项目点列表
      },
      rules: {
        productName: [{required: true, message: '请输入产品名称', trigger: 'blur'}],
        corporationId: [{required: true, message: '请选择机构', trigger: 'change'}],
        // admitArea: [{required: true, message: '请输入可申请区域', trigger: 'blur'}],
        productContent: [{required: true, message: '请输入产品内容', trigger: 'change'}],
        applyQualification: [{required: true, message: '请输入申请资格', trigger: 'blur'}],
        productSlogan: [{required: true, message: '请输入产品推荐语', trigger: 'blur'}],
        // imgUrl: [{required: true, message: '请上传卡片封面', trigger: 'blur'}],

      },
      corporationList: [],

    }
  },
  methods: {
    // 预览图片

    /**
     * 提交代码
     */
    submit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.addProd()
        }
      })
    },
    // 新增
    addProd () {
      (this.editData.productId ? api.editCredit : api.addCredit)({...this.dataForm, tenantId: getCookie('tenantId')}).then(res => {
        const {responseCode, responseMsg} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.$message({
            message: `${responseMsg}`,
            type: 'success'
          })
          this.$emit('close')
        }
      })

    },
    close () {
      this.$emit('close')
    },
    onChange () {
      console.log(this.selectedOptions)
      this.dataForm.admitArea = this.selectedOptions.map(item => item.join('-')).join(',')
    },
    onChangeImg (file) {
      this.dataForm.imgUrl = file.url
    },
    //获取机构列表数据
    getOrgList () {
      api.queryList({tenantId: getCookie('tenantId')}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.corporationList = data
          console.log('机构列表', this.corporationList)
        }
      })
    },
    projectLocationsChange (val) {
      console.log('projectLocationsChange', val)
      this.dataForm.projectLocations = val
    },
    getDetail () {
      api.queryDetail({productId: this.editData.productId, productType: 'CREDIT'}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.selectedOptions = (data.admitArea||'').split(',').map(i => i.split('-'))
          console.log('详情......', this.selectedOptions)
          data.projectLocations=data.projectLocationResults
          this.dataForm = data
        }
      })
    },

  },
  mounted () {
    if (this.org.corporationId) {
      this.dataForm.corporationId = this.org.corporationId
    }
    if (this.editData.productId) {
      this.getDetail()
    }
    this.getOrgList()

  },
  computed: {
    ...mapState({
      dicts: state => state.common.dicts
    })
  }
}
</script>

<style scoped>
</style>

